<!--/*-->
<!--* Datart-->
<!--* <p>-->
<!--    * Copyright 2021-->
<!--    * <p>-->
<!--    * Licensed under the Apache License, Version 2.0 (the "License");-->
<!--    * you may not use this file except in compliance with the License.-->
<!--    * You may obtain a copy of the License at-->
<!--    * <p>-->
<!--    * http://www.apache.org/licenses/LICENSE-2.0-->
<!--    * <p>-->
<!--    * Unless required by applicable law or agreed to in writing, software-->
<!--    * distributed under the License is distributed on an "AS IS" BASIS,-->
<!--    * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.-->
<!--    * See the License for the specific language governing permissions and-->
<!--    * limitations under the License.-->
<!--    */-->

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta content="email=no" name="format-detection" />
    <title>Title</title>
    <style>
        html,body,div,header,h2,article,button,p {
            margin: 0; padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        .container {
            width: 100%;
            height: 100%;
            background-color: #EAEDF1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .wrapper {
            width: 420px;
            display: flex;
            flex-direction: column;
            text-align: center;
        }
        header{
            flex:0;
            background-color: #1B98E0;
            border-radius: 2px 2px 0 0;
            line-height: 56px;
            height: 56px;
            color: #fff;
        }
        article {
            flex: 1;
            background-color: #fff;
            border-radius: 0 0 2px 2px;
            padding: 32px;
        }
        .title {
            color: #444444;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 16px;
        }
        .sure{
            font-size: 16px;
            outline: none;
            display: inline-block;
            margin-bottom: 32px;
            padding: 8px 48px;
            border-radius: 4px 4px;
            background-color: #1B98E0;
            color: #fff;
            cursor: pointer;
            text-decoration:none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        .detail {
            font-size: 14px;
            color: rgba(0,0,0,.59);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="wrapper">
        <header>
            <h2><span th:text="#{message.user.active.mail.header}"></span></h2>
        </header>
        <article>
            <div class="title"><span th:text="|#{message.user.active.mail.greeting},${username}|">greeting</span></div>
            <a class="sure" th:text="#{message.user.active.mail.active}" th:href="@{{host}(activation_token=${token},host=${host})}"></a>
            <p class="detail"><span th:text="#{message.user.active.mail.tips}"></span></p>
        </article>
    </div>
</div>
</body>
</html>